<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<body>

<script type="text/javascript">
Ext.require(['*']);
var abc = Ext.create("Ext.form.field.Date", { 
        xtype: 'datefield',
        anchor: '100%',
        fieldLabel: 'Date',
        name: 'date',
        // The value does not match the format, but does match an altFormat; will be parsed
        // using the altFormat and displayed using the format.
        format: 'm d Y',
        altFormats: 'm,d,Y|m.d.Y',
        value: '2.4.1978'
});

var mainPart = Ext.create('Ext.panel.Panel', {
	title: "Case",
	width: '100%',
	height: '100%',
	layout: {
		type: 'table',
		columns: 2
	},
	items: [{
		xtype: "textfield",
		fieldLabel: 'Name',
		name: 'name'
	},{
		xtype: "textarea",
		fieldLabel: 'description',
		name: 'desc',
		rowspan: 2
	}]
});

var top = Ext.create('Ext.form.Panel', {
    frame:true,
    title: 'Multi Column, Nested Layouts and Anchoring',
    bodyStyle:'padding:5px 5px 0',
    width: '100%',
    fieldDefaults: {
        labelAlign: 'left',
        msgTarget: 'side'
    },

    items: [{
        xtype: 'container',
        anchor: '100%',
        layout:'column',
        items:[{
            xtype: 'container',
            columnWidth:.5,
            layout: 'anchor',
            items: [{
                xtype:'textfield',
                fieldLabel: 'name',
                name: 'name',
                anchor:'96%'
            },{
            	xtype: 'textfield',
            	fieldLabel: 'url',
            	name: 'url',
            	anchor: '96%'
            },{
            	xtype: 'container',
            	layout: 'column',
            	anchor: '96%',
            	items: [{
            		xtype: 'textfield',
            		fieldLabel: 'method',
                    columnWidth:.5,
            		anchor: '40%'
            	},{
            		xtype: 'textfield',
            		fieldLabel: 'format',
                    columnWidth:.5,
            		anchor: '40%'            		
            	}]
            }]
        },{
            xtype: 'container',
            columnWidth:.5,
            layout: 'anchor',
            items: [{
                xtype:'textarea',
                fieldLabel: 'description',
                name: 'desc',
                anchor:'100%'
            }]
        }]
    }, {
        xtype: 'container',
        anchor: '100%',
        layout: 'column',
        items: [{
        	xtype: 'textarea',
        	height: 600,
        	fieldLabel: 'request',
        	columnWidth:.5,
        	anchor: '96%',
        	labelAlign: 'top'        	
        },{
        	xtype: 'textarea',
        	height: 600,
        	fieldLabel: 'response',
        	columnWidth:.5,
        	anchor: '96%',
        	labelAlign: 'top'        	
        }]
    }],

    buttons: [{
        text: 'Save'
    },{
        text: 'Cancel'
    }]
})

Ext.onReady(function() {
    var cw;
    
    Ext.create('Ext.Viewport', {
        layout: {
            type: 'border',
            padding: 5
        },
        defaults: {
            split: true
        },
        items: [{
            region: 'west',
            collapsible: true,
            xtype: 'form',
            title: 'Case List',
            split: true,
            width: '30%',
            //html: 'west<br>I am floatable'
            items: [{
            	xtype: 'button', title:'haahha'
            }]
        },{
            region: 'center',
            layout: 'border',
            border: false,
            items: [{
                region: 'center',
                title: 'Case Detail',
                items: [top],
                dockedItems: [{
                    xtype: 'toolbar',
                    dock: 'bottom',
                    items: ['Text followed by a spacer',
                        ' ', {
                            itemId: 'toggleCw',
                            text: 'Constrained Window',
                            enableToggle: true,
                            toggleHandler: function() {
                            cw.setVisible(!cw.isVisible());
                        }
                    }]
                }]
            },{
                region: 'south',
                height: 100,
                split: true,
                collapsible: true,
                title: 'Splitter above me',
                html: 'center south'
            }]
        }]
    });
});
</script>

</body>
</html>